<template>
	<view class="mnie-page">
		<view class="top">
			<view class="my">我的</view>
			<User />
			<view class="vip-point">
				<view class="content" @click="openMemberCenterPage">
					<view class="vip-hyzx"></view>
					<view class="open-vip"> 立即开通</view>
				</view>
				<view class="triangle"></view>
			</view>
		</view>
		<ChildBook />
		<view class="cell">
			<list>
				<!-- <van-cell value="" size="large" icon="share-o"  is-link  link-type="navigateTo" @click="() =>jumpUrl('/pagesC/share/index')">
				  <view slot="title" class="inline">
				    <view class="van-cell-text">分享</view>
				  </view>
				</van-cell> -->
				
				<!-- <van-cell value="" icon="chat-o" is-link link-type="navigateTo" @click="() =>jumpUrl('/pagesC/notice/index')" >
				  <view slot="title" class="inline">
				    <view class="van-cell-text">消息通知</view>
				    <van-tag color="#FF6363" round >1</van-tag>
				  </view>
				</van-cell> -->
				<!-- <van-cell value="" size="large" icon="debit-pay" is-link link-type="navigateTo" @click="() =>jumpUrl('/pagesC/order/index')" >
				  <view slot="title" class="inline">
				    <view class="van-cell-text">我的订单</view>
				  </view>
				</van-cell> -->
				<uni-list-item title="联系我们"  clickable  @click="() =>jumpUrl('/pagesA/contact/index')">
				<!--  <view slot="title" class="inline"> 
				    <view class="van-cell-text">联系我们</view>
				  </view> -->
				</uni-list-item>
				<!-- <van-cell value="" icon="rcle-o" is-link>
				  <view slot="title" class="inline">
				    <view class="van-cell-text">五星好评</view>
				  </view>
				</van-cell> -->
				<uni-list-item title="意见反馈"  clickable  @click="() =>jumpUrl('/pagesA/feedback/index')">
				 <!-- <view slot="title" class="inline">
				    <view class="van-cell-text">意见反馈</view>
				  </view> -->
				</uni-list-item>
				<uni-list-item title="设置"  clickable   @click="() =>onSetting()">
					<!-- <template v-slot:header>
						<uni-icon type="gear" size="25" />
					</template> -->
				</uni-list-item>
				<!-- <van-cell value="" size="large"  icon="share-o" is-link link-type="navigateTo" @click="() =>onShareCode()">
				  <view slot="title" class="inline">
				    <view class="van-cell-text">我的分享二维码</view>
				  </view>
				</van-cell> -->
			</list>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { computed, onMounted, ref } from 'vue'
	import User from './user.vue'
	import ChildBook from './childBook.vue';
	import { useBound } from "@/hooks/useBound.ts"
	import { mock } from "@/utils/index"
	const {tipBoundStudent, studentIsEmpt} = useBound();
	
	const onShareCode = () => {
		if(!mock.isLogged()){
			tipBoundStudent()
			return
		}
		jumpUrl('/pagesA/sharecode/index', true)
	}
	
	const onSetting = () => {
		if(!mock.isLogged()){
			tipBoundStudent()
			return
		}
		jumpUrl('/pagesA/setting/index', true)
	}
	
	const openMemberCenterPage = () => {
		if(studentIsEmpt.value){
			tipBoundStudent();
			return;
		}
		uni.navigateTo({
			url:'/pagesB/memberCenter/index'
		})
	}
	
	const jumpUrl = (url: string, pass: boolean) => {
		if(studentIsEmpt.value && !pass){
			tipBoundStudent();
			return;
		}
		uni.navigateTo({
			url
		})
	}

</script>
<style lang="scss">
page {
	background-color: #f5f9fa;
}
</style>

<style scoped lang="scss">
	.mnie-page{
		width: 100%;
		overflow: hidden;
		.top{
			background: linear-gradient(180deg, #daf2eb, #f2f9fd);  
			width: 100%;
			height: 300upx;
			.my{
				display: flex;
				justify-content: center;
				font-weight: 800;
				font-size: 36upx;
				color: #081A2A;
				margin-bottom: 40upx;
			}
			.vip-point{
				position: relative;
				background-color: #364060;
				padding: 0 17upx;
				width: calc(100% - 68upx);
				margin: 30upx auto;
				border-top-left-radius: 40upx;
				border-top-right-radius: 40upx;
				box-shadow: 1px 12px 10px 0px #d2d2d2;
				// margin-top: 60upx;
				// margin-bottom: 60upx;
				.content{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 200upx;
					.open-vip{
						width: 140upx;
						height: 50upx;
						background: linear-gradient( 90deg, #FBD5B6 0%, #F1B583 100%);
						border-radius: 25upx;
						font-weight: 800;
						font-size: 24upx;
						color: #343C5C;
						text-align: center;
						line-height: 50upx;
						margin-right: 20upx;
					}
					.vip-hyzx{
						width: 207upx;
						height: 43upx;
						background: url('/static/icon/hyzx.png') no-repeat 0 0;
						background-size: cover;
						margin-left: 20upx;
					}
				}
				.triangle{
					width: 60upx;
					height: 60upx;
					background-color: #364060;
					border-radius: 10upx;
					transform: rotate(45deg);
					// transform: translate(50%, 50%);
					position: absolute;
					left: 0;
					right: 0;
					margin: auto;
					bottom: -20upx;
				}
			}
		}
		
		
		.cell{
			margin: 180upx auto 0 auto;
			width: calc(100% - 34upx);
			background-color: #fff;
			border-radius: 16upx;
			
			.inline{
				display: flex;
				font-size: 32upx;
			}
			.van-cell-text{
				margin-left: 15upx;
			}
		}
	}

</style>